<template>
 <div class="BIgbg">
  <Hedar></Hedar>
  <div class="logoImg">

  </div>
  <Newsnav :index="3"></Newsnav>
  <p class="titleS">
    <img v-bind:src=bannerImgs />
  </p>
  <div class="condition">
      <div class="expert expert2">
        <h4>专家职称：</h4>
        <ul>
          <li v-for="data in  datas1" @click="click1($event)" :dataid=data.id >{{data.name}}</li>


        </ul>
      </div>
      <div class="expert">
        <h4>专业领域：</h4>
        <ul>

          <li v-for="data in  datas2" @click="click2($event)" :dataid=data.id>{{data.name}}</li>
        </ul>
      </div>
      <div class="expert">
        <h4>工作年限：</h4>
        <ul>
          <li v-for="data in  datas3" @click="click3($event)" :dataid=data.id>{{data.name}}</li>
        </ul>
      </div>
      <div class="expert">
        <h4>学历：</h4>
        <ul>
          <li v-for="data in  datas4" @click="click4($event)" :dataid=data.id>{{data.name}}</li>
        </ul>
    </div>
  </div>
  <p class="expertList">专家列表</p>
  <ul class="Pinformation" v-if="showx">
    <li v-for="(data,index) in  datas5">
      <div class="portrait">
       <!-- <img v-bind:src=myfilter(data.photo) />-->
         <img  v-if="data.photo ? show1:!show1" v-bind:src=data.photo />
         <img  v-else v-bind:src=bannerImgs1 />
      </div>
      <p class="zjname">{{data.spare3}}</p>
      <p class="education">学历：{{data.education}}</p>
      <p class="field">工作年限：{{data.dateWorke}}</p>
      <p class="field">专业领域：{{data.field}}</p>
      <button :dataIns=data.id @click='getDataId(data.id)'>预约TA</button>
    </li>
  </ul>
   <ul class="Pinformation" v-if="!showx">
     此分类下暂无信息
   </ul>
 <el-pagination
        class="pageS"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="counts">
      </el-pagination>
  <Footers></Footers>
</div>
</template>

<script>
 import Hedar from'@/components/Hedar'
 import Footers from'@/components/Footers'
 import Newsnav from "@/components/Newsnav"
  export default {
  data () {
      return {
        showx:true,
      bannerImgs:require('@/assets/zjtitle.png'),
        bannerImgs1:require('@/assets/wdl.png'),
      show1:true,
      currentPage3: 1,
      counts:16,
      datas1:[
        {name:"正高级工程师",id:1},
        {name:"副高级工程师",id:2},
        {name:"中级工程师",id:3},
      ],
      datas2:[
        {name:"建筑专业",id:4},
        {name:"规划专业",id:5},
        {name:"结构专业",id:6},
        {name:"设备专业",id:7},
        {name:"造价专业",id:8},
        {name:"公路专业",id:9},
        {name:"园林专业",id:10},
        {name:"水利专业",id:11},
        {name:"市政专业",id:12},
        {name:"工程建设",id:13},
        {name:"工程咨询",id:14},
        {name:"专项工程",id:15},
        {name:"软件制图",id:16},
        {name:"工程监理",id:17},
        {name:"经济专业",id:18},
      ],
      datas3:[
        {name:"20年以上",id:19},
        {name:"15-20年",id:20},
        {name:"10-15年",id:21},
        {name:"10年以下",id:22},
      ],
      datas4:[
        {name:"博士及以上",id:23},
        {name:"硕士",id:24},
        {name:"本科",id:25},
        {name:"大专",id:26},
        {name:"大专以下",id:27},
      ],
      datas5:[
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':4,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':2,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':2,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':2,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':2,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':2,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
      ],
      title:'',
      field:'',
      education_number:'',
      major_number:''

      }
    },
  methods: {

       getDataId(id) {

            this.$router.push({path: '/ZJdetails', query:{stage: id}});
            console.log(id);
        },
        zjlist(pagee){
          window.scrollTo(0,0);
         let that=this
          $.ajax({
              type: "post",
              url: local+"/awm/experts/expertsListQuery",
              data: {
                  page:pagee,
                  title:that.title,
                  field:that.field,
                  major_number:that.education_number,
                  education_number:that.major_number,
              },
              dataType: "json",
              beforeSend:function (xhr) {
                xhr. withCredentials=true
              },
              success: function(data){
                  console.log(data)
                  that.datas5=data.resultData.expertsa
                if(data.resultData.expertsa.length>0){
                  that.counts=data.resultData.expertsa[0].count
                  that.showx=true
                }else{
                  that.counts=1
                  that.showx=false

                }
              },
              error:function(aa){
                console.log(aa)
              }
            });
      },
      myfilter(value){
        return 'http://wut1.oss-cn-beijing.aliyuncs.com/'+ value.split('../')[1]

      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)

         this.zjlist(val)

      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)

        this.zjlist(val)

      },
      click1 (e) {


      if($(e.currentTarget).hasClass('activas')){
          $(e.currentTarget).removeClass('activas')
          this.title=""
        }else{
          $(e.currentTarget).addClass('activas').siblings().removeClass('activas')
          this.title=$(e.currentTarget).attr('dataid')
        }
        this.zjlist(1)



      },
      click2 (e) {


      if($(e.currentTarget).hasClass('activas')){
          $(e.currentTarget).removeClass('activas')
          this.field=""
        }else{
          $(e.currentTarget).addClass('activas').siblings().removeClass('activas')
          this.field=$(e.currentTarget).attr('dataid')
        }
       this.zjlist(1)


      },
      click3 (e) {
      if($(e.currentTarget).hasClass('activas')){
          $(e.currentTarget).removeClass('activas')
          this.education_number=""
        }else{
          $(e.currentTarget).addClass('activas').siblings().removeClass('activas')
          this.education_number=$(e.currentTarget).attr('dataid')
        }
       this.zjlist(1)


      },
      click4 (e) {


      if($(e.currentTarget).hasClass('activas')){
          $(e.currentTarget).removeClass('activas')
          this.major_number=""
        }else{
          $(e.currentTarget).addClass('activas').siblings().removeClass('activas')
          this.major_number=$(e.currentTarget).attr('dataid')
        }
       this.zjlist(1)


      },
  },
  mounted () {
      this.zjlist(1)
    },
  components:{
      Newsnav,
      Hedar,
      Footers
    }
  }
</script>
<style scoped>
 .BIgbg{
 /*background:#f1f1f1;*/
 }
 .activas{
   background:#ff8328;
   color:#fff;
 }
 .logoImg{
  width:100%;
  height:120px;
  background:url(../assets/logobig1.png) no-repeat 0 0;
  overflow: hidden;
}
.logoImg .lOgin_search{
  width:490px;
  height:38px;
  margin:40px 0 0 282px;
}
.logoImg .lOgin_search input{
  width:408px;
  height:36px;
  background: #eaeaea;
  float:left;
  border:1px solid #ff8328;

}
.logoImg .lOgin_search span{
  width:80px;
  height:38px;
  line-height: 38px;
  background:#ff8328;
  float:left;
  color:#eff4fa;
}
.logoImg .lOgin_search span:hover{
  cursor: pointer;
}
.titleS{
  margin-bottom:15px;
  text-align:left;

  height:320px;
}
.titleS img{
  width:100%;
  height:320px;
}

.condition{
  min-height:10px;
  background:#fff;
  padding:30px 25px 10px 35px;
  margin:15px;
  text-align:left;

}
.condition .expert{
  padding-top:10px;
  min-height:10px;
　width:100%;
  /*overflow: auto;*/
  zoom: 1;
  margin-bottom:15px;
  border-top:1px dashed #b5b5b5;

}
.condition .expert2{
  border-top:none;
}
.expert h4{
  /*float:left;*/
  display: inline-block;
  word-break:break-all;
  vertical-align:top;
  padding-right:10px;
  line-height:30px;
  height:30px;
  font-size:16px;
  width:8%;

}
.expert ul{
  display: inline-block;
  word-break:break-all;
  vertical-align:top;
  min-height:30px;
  line-height:30px;
  width:86%;
  /*overflow: auto;*/
    zoom: 1
}
.expert ul li{
  float:left;
  height:30px;
  padding:0 10px;
  line-height:30px;
  margin-right:15px;
  cursor:pointer;
}
.expertList{
  height:30px;
  background:#fff;
  text-align:left;
  margin:15px;
  line-height:30px;
  padding-left:20px;
}
.Pinformation{
    min-height: 1000px;
    overflow: auto;
    zoom: 1;
    margin:10px 15px;
    /*background:#f5f5f5;*/
    padding-bottom:10px;
}
.Pinformation li{
  width:23.8%;
  float:left;
  height:380px;
  margin-left:9px;
  margin-top:9px;
  background:#fff;
  box-shadow: 0px 0px 2px 2px #e3e2e2;
  transition: all 0.6s;
  -moz-transition: all 0.6s;	/* Firefox 4 */
  -webkit-transition: all 0.6s;	/* Safari 和 Chrome */
  -o-transition: all 0.6s;
}
 .Pinformation li:hover{
   transform: scale(1.05);
   -moz-transform: scale(1.05);	/* Firefox 4 */
   -webkit-transform: scale(1.05);	/* Safari 和 Chrome */
   -o-transform: scale(1.05);
 }


.Pinformation .portrait{
  width:100%;
  height:95px;
  padding-top:10px;

}
.portrait img{
    height: 80px;
    width: 80px;
    border:1px solid #ededed;
    border-radius:50%;


}
.Pinformation .zjname{
  width:100%;
  height:45px;
  line-height:45px;

  font-size: 21px;
}
.Pinformation .education,.Pinformation .field{
  width:100%;
  height:35px;
  line-height:35px;
  text-align:center;
  font-size: 16px;
}
.Pinformation .field{
  width:192px;
  height:30px;
  line-height:30px;
  margin-bottom:13px;
  background:#edf4f7;
  margin-left:47px;
}
.Pinformation button{
  font-size: 16px;
  height:30px;
  line-height:30px;
  border:1px solid #ff8328;
  background:#ff8328;
  color:#fff;
  width:100px;
  margin-top:40px;
  border-radius:5px;

}
 .Pinformation button:hover{
   cursor: pointer;
 }
.pages{
  text-align:right;
  margin-right:25px;
  height:50px;
  padding-top:10px;
}
.Service{
  height:50px;
  line-hright:50px;
  text-align:left;
  margin-left:20px;
  font-size:25px;
  font-weight:100;
}
.Advertisement{
  overflow: auto;
    zoom: 1;
    height:300px;
    width:100%;
    margin-left:15px;
}
.Advertisement li{
  float:left;
    height:218px;
    width: 240px;
    margin-left:5px;
    background:#ededed;
}
.Advertisement .places,.Advertisement  .Company{
  background:#fff;
  width:200px;
  margin-left:20px;
  height:40px;
  line-height:40px;
}
.Advertisement .Company{
  font-size: 20px;
}
.Advertisement .places {
  font-size: 16px;
  color:#666666
}
.Advertisement .places span{
  background:#459dff;
  color:#fff;
  margin-left:5px;
  padding:1px 3px;
}
.Advertisement  .Imgs{
  width:200px;
  margin-left:20px;
  padding-top:10px;
  height:120px;
}
.Advertisement  .Imgs img{
  width:100%;
  height:120px;
}
</style>
